<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Sign On</title>
<style type="text/css">
</style>
</head>

<link rel="stylesheet" type="text/css"
	href="css/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2.1/ext-base.js"></script>
<script type="text/javascript" src="ext3.2.1/ext-all.js"></script>
<script type="text/javascript" src="ext3.2.1/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
	Ext
			.onReady(function() {
				Ext.QuickTips.init(); //提示错误信息

				var okButton = new Ext.Button(
						{
							text : '登录',
							tabIndex : 3,
							listeners : {
								click : function() {
									if (form.getForm().isValid()) {
										Ext.Ajax
												.request({
													waitTitle : '正在登录',
													waitMsg : '亲，我正在很用力的为您登录，相信我喔！',
													//?method=login&loginName=jinze&loginPwd=1
													url : 'oa/login_login.do',
													params:{loginName:document.getElementById("loginName").value,loginPwd:document.getElementById("loginPwd").value},
													method : 'post', //get
													success : function(
															response, options) {
														window.location.href = "/oa/oa.jsp";
													},
													failure : function() {
														Ext.Msg
																.alert("糟糕",
																		"亲，我吃了闭门羹，是不是你的用户名或密码输错了？");
													}
												});
									}
								}
							}
						});

				var resetButton = new Ext.Button({
					text : '重置',
					tabIndex : 4,
					handler : function() {
						form.getForm().reset();//清空表单
					}
				})

				var loginName = new Ext.form.TextField({
					id:'loginName',
					fieldLabel : '用户名',
					labelStyle : 'text-align:right;',
					width : '240px',
					name : 'loginName',
					allowBlank : false,
					blankText : '用户名不能为空',
					msgTarget : 'side',
					maxLength : 20,
					maxLengthText : '用户名长度不能大于20',
					tabIndex : 1
				});

				var loginPwd = new Ext.form.TextField({
					id:'loginPwd',
					fieldLabel : '密码',
					labelStyle : 'text-align:right;',
					inputType : 'password',
					width : '240px',
					name : 'loginPwd',
					autoBlank : false,
					blankText : '密码不能为空',
					msgTaget : 'side',
					maxLength : 20,
					maxLengthText : '密码长度不能大于20',
					tabIndex : 2,
					enableKeyEvents : true,
					listeners : {
						specialkey : function(field, e) {
							if (e.getKey() == Ext.EventObject.ENTER) {
								okButton.fireEvent('click');
							}
						}
					}
				});

				//创建表单
				var form = new Ext.form.FormPanel({
					bodyStyle : {
						padding : '250px,300px'
					}, //外层必须有容器
					buttonAlign : 'center',
					frame : false,
					border : false,
					width : '400px',
					height : '400px',
					items : [ loginName, loginPwd ],
					buttons : [ okButton, resetButton]
				});

				//创建Panel容器
				var panel = new Ext.Panel({
					renderTo : 'loginForm',//渲染到页面上
					border : true,
					layout : 'fit',
					width : '400px',
					height : 'auto',
					title : '登录',
					style : 'margin-top:200px;margin-left:'
							+ (window.screen.availWidth / 2 - 200) + 'px;',
					items : [ form ]
				});

			});
</script>
<body>
	<div id="loginForm"></div>
</body>
</html>
